<template>
  <div class="index" >
      <div class="hotwork">
          <ul>
              <li v-for="(company,index) in companylist" :key="index">
                  <div class="img">
                    <img :src="'http://120.48.37.120:9000/parttime/'+company.companypic" alt="">
                  </div>
                  <div class="company">
                      <span class="companyname">{{company.companyname}}</span>
                      <span class="placename">{{company.placename}}</span>
                      <span class="comadvantage">{{company.comadvantage}}</span>
                  </div>
                  <div class="btn">
                      <el-button  size="mini" round type="success">查看详情</el-button>
                  </div>
              </li>
          </ul>
          
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            //获取招聘列表的参数
            queryInfo:{
                querystring:'',
                pagenum:1,
                pagesize:8
            },
            companylist:[],
            
        }
    },
    created(){
        this.getcompanylist()
    },
    methods:{
        //获取所有岗位
        async getcompanylist(){
            const {data:res} =await this.$http.get('company',{params:this.queryInfo})
            if(res.meta.status!=200) return this.$message.error(res.meta.msg)
            this.companylist=res.data.records
            this.total=res.data.total
        },
    }

}
</script>

<style lang="less" scoped>
.hotwork{
    ul{
        width: 80%;
        margin: 0 auto;
    }
    li{
        padding: 10px 0px 0 20px;
        list-style-type:none;
        width: 44%;
        height: 165px;
        margin-bottom: 10px;
        float: left;
        margin: 20px;
        border-radius: 10px;
        background-color: #fff;
        .img{
            width: 20%;
            height: 125px;
            margin-top: 15px;
            float: left;
            
        }
        img{
            width: 100%;
            height: 100%;
        }
        span{
            display: block;
        }
        .company{
            width: 70%;
            float: left;
            margin-left: 25px;
        }
        .companyname{
            font-size: 20px;
            font-weight: 700;
            margin:20px 0 10px 10px;
        }
        .placename{
            color: #999999;
            margin:10px 0 0 10px;
        }
        .comadvantage{
            background-color: #F6F7F8;
            padding: 5px 10px 5px 10px;
            color: #666666;
            font-size: 10px;
            margin:6px 0 10px 6px;
            float: left;
            border-radius: 10px;
        }
        .btn{
            margin-left: 100px;
            float: left;
        }

    }
    li:hover{
        box-shadow: 1px 1px 5px #888888;
    }
}
</style>